<template>
  <section class="section-case">
    <div class="container">
      <!--  -->
      <ul class="nav nav-pills nav-fill category">
        <template v-for="(item, index) in projectCategoryList" :key="index">
          <li class="nav-item">
            <a
              :class="
                item.id == params.categories ? 'nav-link active' : 'nav-link '
              "
              @click="changeCategory(item.id)"
            >
              {{ item.name }}
            </a>
          </li>
        </template>
        <li class="nav-item">
          <a
            :class="4 == params.categories ? 'nav-link active' : 'nav-link '"
            @click="changeCategory('4')"
            >All</a
          >
        </li>
      </ul>
      <!--  -->
      <div class="project-list">
        <div class="row row-cols-1 row-cols-md-4 g-4">
          <template v-for="(item, index) in result.list" :key="index">
            <div class="col">
              <div class="card h-100">
                <!-- <img :src="require('@/assets/image/blog-banner.jpg')" class="card-img-top" alt="..." /> -->
                <a-image
                  class="card-img-top"
                  style="height: 20vh"
                  :src="
                    $getImgUrlFromMediaById(item.featured_media_src_url)
                      ? $getImgUrlFromMediaById(item.featured_media_src_url)
                      : '/#'
                  "
                  fallback=""
                />
                <div class="card-body" @click="jumpDetail(item.id)">
                  <h5
                    class="card-title"
                    :title="$wordpressDecodeHTML(item.title.rendered)"
                    style="
                      display: block;
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                    "
                  >
                    {{ $wordpressDecodeHTML(item.title.rendered) }}
                  </h5>
                  <!--
                     <p class="card-text">
                    {{ $deleteHtmlTag(item.excerpt.rendered) }}
                  </p> 
                  -->
                </div>
              </div>
            </div>
          </template>
          <!-- 分页 -->
          <div class="col-md-12 d-flex justify-content-center">
            <a-pagination
              v-model:current="params.page"
              v-model:pageSize="params.per_page"
              :total="result.total"
              show-less-items
              @change="onPageChange"
            />
          </div>
          <!--  -->
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import { getArticleList } from "@/api/index";

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  computed,
} from "vue";
export default {
  name: "ProjectIndex",
  components: {},
  props: {},
  setup() {
    const { proxy } = getCurrentInstance();

    const data = reactive({
      projectCategoryList: computed(
        () => proxy.$store.getters.projectCategoryList
      ),
      params: {
        page: 1,
        per_page: 20,
        categories: 4,
        // search: computed(() => (proxy.$route.query.keyword ? proxy.$route.query.keyword : "")),
      },
      result: {
        list: [],
        total: 0,
      },
    });
    const refData = toRefs(data);
    onBeforeMount(() => {
      if (proxy.$route.params.id) {
        data.params.categories = proxy.$route.params.id;
      }
      methods.getList();
    });
    onMounted(() => {});
    //
    const methods = {
      getList() {
        getArticleList(data.params).then((res) => {
          // 获取总数
          let headers = res.headers;
          data.result.total = parseInt(headers["x-wp-total"]);
          //
          data.result.list = res.data;
        });
      },
      onPageChange(pageNumber) {
        data.params.page = pageNumber;
        methods.getList();
      },
      changeCategory(id) {
        data.params.categories = id;
        data.params.page = 1;
        this.getList();
      },
      jumpDetail(id) {
        proxy.$router.push(`/project/detail/${id}`);
      },
    };
    //
    return {
      ...refData,
      ...methods,
    };
  },
};
</script>
<style lang="scss" scoped>
.section-case {
  padding: 100px 0;

  .project-list {
    margin-top: 50px;
  }

  .card {
    .card-title {
      &:hover {
        cursor: pointer;
      }
    }
  }
}
</style>
